<template>
	<view class="content">
		<view class="info-block">
			<view class="title FangZhengHanZhenGuangBiaoJianTi">信息</view>
			<view class="info-item">
				<view class="title-item">
					<view class="must">*</view>
					<view class="name">{{title}}内容</view>
				</view>
				<view class="form-item">
					<textarea placeholder="请简述您要报修的内容…" v-model="detail.content" class="form-ctr2" maxlength="80"
						type="text"></textarea>
				</view>
			</view>
			<view class="info-item">
				<view class="title-item">
					<view class="must">*</view>
					<view class="name">图片</view>
				</view>
				<view class="form-item">
					<image :src="detail.attachment" mode="widthFix" v-if="detail.attachment"></image>
					<view v-else>
						暂无图片
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		feedBackDetailApi
	} from '@/api/feedback.js'
export default {
		data() {
			return {
				detail: {
					contact_person: '',
					contact_phone: '',
					address: '',
					detail: '',
					content: '',
					title: ''
				},
				title: '',
			}
		},
		methods: {
			getDetailApi() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const id = this.id
				feedBackDetailApi(id).then(data => {
					uni.hideLoading()
					this.detail = data
					this.category[0].forEach((item) => {
						item.child.forEach((item1) => {
							if (item1.id == this.detail.category_id) {
								this.title = item1.name
							}
						})
					})
				}).catch(() => {
					uni.hideLoading()
				})
			}
		},
		onLoad(e) {
			this.title = e.title
			this.id = e.id
			this.getDetailApi()
			// uni.setNavigationBarTitle({
			// 	title: e.title
			// })
			// this.getList()
			// this.form.title = e.title
			// if (e.state) {
			// 	this.state = e.state
			// 	this.id = e.id
			// 	this.getDetailApi()
			// } else
			// 	this.state = 0
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		background: #F7F6F9;
		height: 100vh;

		.info-block {
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.title {
				color: #BA1519;
				margin: 30rpx 0;
			}

			.info-item:last-child {
				border-bottom: none;
			}

			.info-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #F7F6F9;

				.title-item {
					display: flex;
					align-items: center;
					line-height: 80rpx;

					.must {
						color: #BA1519;
					}
				}

				.form-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.form-crl {
						flex-grow: 1;
						height: 90rpx;
						font-size: 28rpx;
						line-height: 90rpx;
					}

					.form-ctrl {
						flex-grow: 2;
						height: 90rpx;
						font-size: 28rpx;
						line-height: 90rpx;
					}

					.form-ctr2 {
						font-size: 28rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.btn-item {
			width: 100%;
			display: flex;
			justify-content: center;
			margin: 50rpx auto;

			.btn {
				background-color: #BA1519;
				color: #fff;
				width: 400rpx;
				height: 100rpx;
				border-radius: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>